<template>
  <Drawer
    title="新建用户"
    v-model="showModal"
    width="720"
  >
    <Form ref="formName" :model="formData" :rules="formRules">
      <FormItem label="所属组织" prop="orgId">
        <TreeSelect v-model="formData.orgId" :data="parentTreeData"></TreeSelect>
      </FormItem>
      <FormItem label="姓名" prop="name">
        <Input v-model="formData.name" placeholder="请输入姓名"/>

      </FormItem>
      <FormItem label="性别" prop="sex">
        <Select v-model="formData.sex"
                default-label="男"
        >
          <Option v-for="item in sexList" :value="item.value" :key="item.value">{{item.label}}</Option>
        </Select>
      </FormItem>
      <FormItem label="年龄" prop="age">
        <Input v-model="formData.age" type="number" placeholder="请输入年龄"/>

      </FormItem>

    </Form>

    <div class="demo-drawer-footer">
      <Button style="margin-right: 8px" :loading="modal_loading" @click="cancel">取消</Button>
      <Button type="primary" :loading="modal_loading" @click="save">保存</Button>
    </div>
  </Drawer>
</template>

<script>
  import {saveUser} from '@/api/base-manage/user'
  import TreeSelect from "_c/tree-select/index.js";
  export default {
    name: 'user-add',
    components: {
      TreeSelect
    },
    props: {
      reloadData: {
        type: Function,
        default: null
      },
      para: {},
      modal_title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        formName: 'userEditForm',
        formData: {
          orgId: [],
          id: '',
          name: '',
          sex: '',
          age: 0
        },
        formRules: {},
        showModal: false,
        sexList: this.setting.sexParam,
        modal_loading: false,
        parentTreeData:[
          {
            title: 'parent 1',
            expand: true,
            children: [
              {
                title: 'parent 1-1',
                expand: true,
                children: [
                  {
                    title: 'leaf 1-1-1'
                  },
                  {
                    title: 'leaf 1-1-2'
                  }
                ]
              },
              {
                title: 'parent 1-2',
                expand: true,
                children: [
                  {
                    title: 'leaf 1-2-1'
                  },
                  {
                    title: 'leaf 1-2-1'
                  }
                ]
              }
            ]
          }
          ]
      }
    },
    mounted() {
    },
    methods: {
      show() {
        this.showModal = true
      },
      cancel() {
        this.showModal = false;
      },
      save() {
        this.modal_loading = true;
        let params = {
          userData: this.formData
        };
        saveUser(params).then(res => {
          if (res.data.success) {
            this.modal_loading = false;
            this.showModal = false;
            this.$Message.success(res.data.msg || '保存成功');

            this.reloadData();
          } else {
            this.modal_loading = false;
            this.$Message.error(res.data.msg || '保存失败');
          }
        }).catch(err => {
          console.log(err);
          this.$Message.error('连接错误');
          this.modal_loading = false;
        })
      },
      reset() {
        let newObj = {};
        _.forEach(this.formData, function (v, k) {
          newObj[k] = ''
        });
        this.formData = newObj;
      },
      initData(obj) {
        let me = this;
        obj = obj || '';
        _.forEach(Object.keys(me.formData), function (v, i) {
          if (['sex','age'].includes(v)) {
            me.formData[v] = Number.parseInt(obj[v]);
          } else {
            me.formData[v] = obj[v];
          }
        })
      },
    },
    watch: {
      showModal() {
        this.modal_loading = false
      }
    }
  }
</script>

<style scoped>
  >>> .left-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
  }

  .footer_content {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
  }

  .footer_content button {
    flex-basis: 4rem;
  }
</style>
